import React, {Component} from "react";

class Cart extends Component {
  render() {
    const { cartProducts, totalPrice ,checkout ,checkoutStatus} = this.props;
    return (<div>
      <h3>Cart</h3>
       {!cartProducts.length && <span>没有任何商品</span>}
      <ul>
        {
          cartProducts && cartProducts.map(i =>
            (<li key={i.id}>
            <p>{i.title}-{i.num}*{i.price}</p>
          </li>))
        }
      </ul>
      <span>total: ${totalPrice}</span>
      <br/>

      <button
        disabled={!cartProducts.length}
        onClick={()=>{checkout(cartProducts)}}>checkout</button>
      {checkoutStatus && <p>checkout {checkoutStatus}</p>}
    </div>)
  }
}

export default Cart